<template>
  <div class="admin">
    <!-- 左侧导航 -->
    <div class="menu" v-bind:style="{ width: menuWStyle }">
      <div v-show="dh" class="dh">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              :default-openeds="openeds"
              class="el-menu-vertical-demo"
              :collapse="isHiddenMenu"
              :collapse-transition="false"
              text-color="#000"
              active-text-color="#004FE0"
              active-background-color="#000"
            >
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-s-grid"></i>
                  <span slot="title">资源配置</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-1" @click="jump('/video')" class="xqsp"
                    >宣传视频</el-menu-item
                  >
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="1-2" @click="jump('/platform')"
                    >平台介绍</el-menu-item
                  >
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="1-3" @click="jump('partner')"
                    >合作伙伴</el-menu-item
                  >
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="1-4" @click="jump('/contact-way')"
                    >联系方式</el-menu-item
                  >
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="1-5" @click="jump('/friendlink')"
                    >友情链接</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-folder-opened"></i>
                  <span slot="title">页面管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="2-1" @click="jump('/navigation')"
                    >导航配置</el-menu-item
                  >
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="2-2" @click="jump('/detail')"
                    >详情页配置</el-menu-item
                  >
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item
                    index="2-3"
                    @click="jump('/Rotating_map_configuration')"
                    >轮播图配置</el-menu-item
                  >
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item
                    index="2-4"
                    @click="jump('/table')"
                    style="z-index:10"
                    >Tab切换图配置</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div class="zzc" v-show="zzc"></div>
    <!-- 遮罩层 -->
    <!-- /左侧导航 -->
    <!-- 右侧内容 -->
    <div class="top">
      <img src="./admin_img/logo1.jpg" alt="" class="logo1" />
      <img src="./admin_img/logo2.png" alt="" class="logo2" />
      <span class="fh1">大运河文旅企业服务后台管理系统</span>

      <el-button type="text" @click="open" class="tcdl">退出登录</el-button>
    </div>
    <div class="main">
      <!-- 顶部 -->

      <div class="l">
        <div class="btn" @click="changeMenuFn">
          <!-- <i class="el-icon-s-fold"></i> -->
          <i v-bind:class="changeMenuIcon"></i>
        </div>
      </div>

      <!-- /顶部 -->
      <!-- 内容 -->
      <div class="content">
        <!-- 151541 -->
        <transition appear name="fade-transform" mode="out-in" class="nr">
          <router-view />
        </transition>
      </div>
      <!-- /内容 -->
    </div>
    <!-- /右侧内容 -->
  </div>
</template>

<script>
import { algin } from "@/api/connector/connector.js";
// import { tcdl } from "@/api/wslapi.js";
// 导出组件数据
export default {
  data() {
    return {
      openeds: ["1", "2"],
      dialogVisible: false,
      centerDialogVisible: false,
      zzc: false,
      dh: true,
      authCode: "",
      menuLoading: false,
      menus: [],
      // zypz:{color=},
      changeMenuIcon: "el-icon-s-fold", // 菜单默认图标
      menuWStyle: "232px", // 菜单默认宽度
      isHiddenMenu: false, // 是否隐藏菜单
    };
  },
  created() {
    // 调用获取 Uid Open-Id Skey的接口
    // console.log(authCode1);
    this.getSkey();
  },

  methods: {
    open() {
      // tcdl().then((res) => {
      //   console.log(res);
      // });
      this.$confirm("您确定要退出登录吗？", "退出登录", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          localStorage.clear();
          this.$message({
            type: "success",
            message: "退出登录成功!",
          });
          window.location.href = "https://oss.d-y-h.cn/mp/oauth2/login";
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出登录",
          });
        });
    },

    // 获取authcode
    getSkey() {
      let url = window.location.href;
      if (url.indexOf("=") !== -1 && url.indexOf("?") !== -1) {
        let authCode = window.location.href.split("?")[1].split("=")[1];
        let obj = {
          authCode: authCode,
        };
        algin(obj).then((res) => {
          let obj = res.data.data;
          this.Uid = obj.uid;
          this.OpenId = obj.openId;
          this.Skey = obj.skey;
          let data = {
            Uid: this.Uid,
            OpenId: this.OpenId,
            Skey: this.Skey,
          };
          window.localStorage.setItem("params", JSON.stringify(data));
        });
      }
    },
    // 控制菜单隐藏显示
    changeMenuFn() {
      this.isHiddenMenu = !this.isHiddenMenu;
      this.menuWStyle = this.isHiddenMenu ? "64px" : "232px";
      this.changeMenuIcon = this.isHiddenMenu
        ? "el-icon-s-unfold"
        : "el-icon-s-fold";
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-menu-item {
  height: 40px;
  line-height: 40px;
}
/deep/.el-submenu__title {
  height: 40px;
  line-height: 40px;
}
/deep/.el-menu-item-group__title {
  height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.el-dialog.el-dialog--center {
  margin-top: 500px !important;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  .qx {
    border: 1px solid #004fe0;
    color: #004fe0;
    height: 32px;
    display: flex;
    align-items: center;
    // position: absolute;
    float: right;
  }
  .qd {
    border: 1px solid #004fe0;
    color: #004fe0;
    height: 32px;
    display: flex;
    align-items: center;
    // position: absolute;
    float: right;
  }
}

* {
  border-style: none;
}
.el-menu-item.is-active {
  background-color: rgb(231, 235, 240) !important;
  background-image: url(./admin_img/icon1.png) !important;
  background-repeat: no-repeat !important;
  background-position-x: 225px !important;
  background-size: auto 100%;
  color: #004fe0 !important;
}
.el-menu-item:hover {
  background-image: url(./admin_img/icon1.png) !important;
  background-repeat: no-repeat !important;
  color: #004fe0 !important;
  background-position-x: 225px !important;
  background-size: auto 100%;
}
.el-menu-item:focus {
  background-image: url(./admin_img/icon1.png) !important;
  color: #004fe0 !important;
  background-repeat: no-repeat !important;
  background-position-x: 225px !important;
  background-size: auto 100%;
}
// 父级文字亮
::v-deep.el-submenu.is-active > .el-submenu__title {
  color: #004fe0 !important;
}
// 父级图标亮
::v-deep .el-submenu.is-active > .el-submenu__title i {
  color: #004fe0 !important;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 232px !important;
  min-height: 400px;
  // .zypz1 {
  //   position: absolute;
  // }
  // .zypz2 {
  //   position: absolute;
  // }
}

.admin {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  overflow-x: hidden;
  position: relative;
  background: #edeff2;

  // 退出登录弹框
  // 头部导航
  .top {
    width: 100%;
    height: 64px;
    background: #004fe0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
    .logo1 {
      width: 44px;
      height: 44px;
      position: absolute;
      top: 10px;
      left: 36px;
    }
    .logo2 {
      width: 73px;
      height: 44px;
      position: absolute;
      top: 10px;
      left: 86px;
    }
    .fh1 {
      min-width: 300px;
      height: 28px;
      font-size: 20px;
      color: #ffffff;
      position: absolute;
      top: 17px;
      left: 280px;
    }
    .tcdl {
      min-width: 72px;
      height: 28px;
      font-size: 18px;
      color: #ffffff;
      position: absolute;
      top: 17px;
      right: 40px;
      padding: 0;
      margin: 0;
    }
  }
  // 左侧导航
  .menu {
    // width: 232px;
    height: 100%;
    background: #ffffff;
    overflow: hidden;
    // TODO. 搞动画 :collapse-transition="false"
    -webkit-transition: width 0.28s;
    transition: width 0.28s;
    position: relative;
    top: 64px;
    left: 0;
    overflow-y: auto;

    .dh {
      // width: 232px;
      height: 75%;
      overflow-y: auto;
      overflow-x: hidden;

      .dh {
        // width: 232px;
        height: 75%;
        overflow-y: hidden;
        overflow-x: hidden;

        /deep/.el-col {
          // overflow-y: auto;
          width: 122% ​ !important;
        }
        .el-row {
          // width: 232px ​ !important;
          margin: 0 !important;
        }
        /deep/.el-menu-vertical-demo.el-menu {
          // width: 15.083vw;
          margin: 0 !important;
        }
      }
    }
    ::-webkit-scrollbar {
      display: none !important;
    }
  }

  // 右侧内容
  .main {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    // background: red;

    // 顶部

    .l {
      display: flex;
      z-index: 10;
      position: fixed;
      // top: 695px;
      // left: 0px;
      // background-color: #fff;
      .btn {
        font-size: 24px;
        position: fixed;
        left: 10px;
        bottom: 0px;
      }
      .btn:hover {
        color: #004fe0;
      }

      // 内容
      .content {
        width: 100%;
        display: flex;
        margin-left: 30px;
        margin-top: 90px;
      }
    }
  }
}
</style>
<style>
.el-button--primary {
  height: 32px;
  width: 72px;
  line-height: 8px;
  background-color: #004fe0 !important;
}
.el-button--small {
  height: 32px;
  width: 72px;
  line-height: 8px;
  border: 1px solid #004fe0;
  color: #004fe0;
}
</style>
